<template>
  <div class="app-container">
    <Header />
    <div class="main-content">
      <Sidebar />
      <div class="content-area">
        <div class="path-nav">
          <span>我的文件</span>
          <span class="separator">/</span>
          <span>{{ currentPath }}</span>
        </div>
        <div class="toolbar">
          <button class="btn-primary" @click="openUploadModal">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M12 5v14M5 12h14"/>
            </svg>
            上传文件
          </button>
          <div class="view-mode">
            <button
              :class="{ active: currentViewMode === 'grid' }"
              @click="currentViewMode = 'grid'"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
              </svg>
            </button>
            <button
              :class="{ active: currentViewMode === 'list' }"
              @click="currentViewMode = 'list'"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line>
              </svg>
            </button>
          </div>
        </div>
        <FileList :viewMode="currentViewMode" />
      </div>
    </div>
    <UploadModal v-if="showUploadModal" @close="closeUploadModal" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Header from '../components/Header.vue'
import Sidebar from '../components/Sidebar.vue'
import FileList from '../components/FileList.vue'
import UploadModal from '../components/UploadModal.vue'

const router = useRouter()
const showUploadModal = ref(false)
const currentPath = ref('全部文件')
const currentViewMode = ref('grid')

const openUploadModal = () => {
  showUploadModal.value = true
}

const closeUploadModal = () => {
  showUploadModal.value = false
}
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

.path-nav {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
  color: #333;
}

.separator {
  margin: 0 10px;
  color: #999;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: #0078d4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #005a9e;
}

.view-mode {
  display: flex;
  gap: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.view-mode button {
  padding: 8px 16px;
  background-color: white;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.view-mode button:hover {
  background-color: #f0f0f0;
}

.view-mode button.active {
  background-color: #0078d4;
  color: white;
}
</style>